<template>
  <div class="online-exam-container">

    <!-- 移动端头部 - 只在移动端显示 -->
    <div class="mobile-header" v-if="isMobile">
      <div class="mobile-header-content">
        <div class="exam-title">{{ pagerInfo.title }}</div>
        <div class="mobile-timer" :class="{ 
          'time-warning': timeLeft < 15 * 60,
          'time-critical': timeLeft < 5 * 60 
        }">
          <font-awesome-icon icon="fa-regular fa-clock" />
          <span>{{ formattedTime }}</span>
        </div>
      </div>
    </div>

    <el-container>
      <el-aside class="exam-sidebar" >
        <!-- 固定顶部导航栏 -->
        <div class="exam-header">
          <div class="header-left">
            <h2 class="exam-title">{{ pagerInfo.title }}
              <el-tag type="success" effect="light">进行中</el-tag>
            </h2>
          </div>

          <div class="header-right">
            <div class="student-info">
              <div class="student-name">
                <font-awesome-icon icon="fa-solid fa-user" class="mr-1" />
                <span>考生：{{ userInfo.name }}</span>
              </div>
              <div class="exam-number">
                <font-awesome-icon icon="fa-solid fa-id-card" class="mr-1" />
                <span>考号：{{ userInfo.examineeId }}</span>
              </div>
            </div>

            <div class="timer-container">
              <font-awesome-icon icon="fa-regular fa-clock" class="timer-icon" />
              <span class="timer-text" :class="{ 
                'time-warning': timeLeft < 15 * 60,
                'time-critical': timeLeft < 5 * 60 
              }">
                {{ formattedTime }}
              </span>
            </div>
          </div>
        </div>

        <!-- 考试信息 -->
        <div class="exam-notice" id="exam-notice" shadow="never" v-if="showNotice">
          <h3 class="notice-title">考试须知</h3>
          <ul class="notice-list">
            <li class="notice-item">
              <font-awesome-icon icon="fa-solid fa-check-circle" class="notice-icon" />
              <span>本场考试共有{{ pagerInfo.questions.length }}道题目</span>
            </li>
            <li class="notice-item">
              <font-awesome-icon icon="fa-solid fa-check-circle" class="notice-icon" />
              <span>考试时间为{{ examDuration }}分钟，请合理安排答题时间</span>
            </li>
            <li class="notice-item">
              <font-awesome-icon icon="fa-solid fa-check-circle" class="notice-icon" />
              <span>考试过程中请勿刷新页面，否则可能导致答案丢失</span>
            </li>
          </ul>
        </div>

        <div class="header-center">
          <div class="exam-controls">
            <el-button class="submit-button" type="danger" size="large" @click="submitExam(false)">
              <font-awesome-icon icon="fa-solid fa-paper-plane" class="mr-1" />
              <span>提交试卷</span>
            </el-button>
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-main>

            <!-- 添加头部，只有移动端的时候才显示 -->

          <el-scrollbar style="height:calc(100vh - 50px)">



            <!-- 主内容区 -->
            <main class="exam-main">
              <!-- 考试内容区 -->
              <div class="exam-content">
                <!-- 题目区域 - 复用现有组件系统 -->
                <div class="questions-area">
                  <div v-for="(question, index) in pagerInfo.questions" 
                    :key="question.id"
                    :id="'question-' + (index + 1)" 
                    class="question-wrapper">
                    <!-- 动态加载题目组件 -->
                    <component 
                      :is="getQuestionComponent(question.type)" 
                      :question="question" 
                      :isQuestionEdit="false"
                      :currentSelect="false" 
                      @update-handleUpdateQuestion="handleAnswerChange" />
                  </div>
                </div>
              </div>
            </main>
          </el-scrollbar>

          <!-- 添加底部，只有移动端才显示，而且固定在底部-->

        </el-main>
      </el-container>
    </el-container>

    <!-- 移动端底部导航 - 只在移动端显示 -->
    <div class="mobile-footer" v-if="isMobile">
      <div class="footer-content">
        <el-button class="footer-button" @click="toggleQuestionList">
          <font-awesome-icon icon="fa-solid fa-list" />
          <span>题目列表</span>
        </el-button>
        
        <el-button class="footer-button" type="primary" @click="submitExam(false)">
          <font-awesome-icon icon="fa-solid fa-paper-plane" />
          <span>提交试卷</span>
        </el-button>
      </div>
    </div>

    <!-- 移动端题目列表抽屉 -->
    <el-drawer
      v-model="showQuestionDrawer"
      title="题目导航"
      direction="btt"
      size="100%"
      :with-header="true"
      class="question-drawer"
    >
      <div class="question-nav">
        <div 
          v-for="(question, index) in pagerInfo.questions" 
          :key="question.id"
          class="question-nav-item"
          :class="{
            'answered': hasAnswer(question.id),
            'marked': markedQuestions.includes(question.id),
            'current': currentQuestion === question.id
          }"
          @click="scrollToQuestion(question.id)"
        >
          <span>{{ index + 1 }}</span>
          <font-awesome-icon 
            v-if="markedQuestions.includes(question.id)" 
            icon="fa-solid fa-bookmark" 
            class="mark-icon"
          />
        </div>
      </div>
    </el-drawer>

  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getPagerDetail, updatePagerQuestion } from '@/api/base/im/scene/examPaper'

import {
  validateAccount ,
  saveAccountScore
} from '@/api/base/im/scene/examPaperJob';

import { detail } from '@/api/base/im/scene/examInfoManager'

// 导入所有题目组件
import RadioSelect from '../questions/radioSelect.vue'
import Checkbox from '../questions/checkBox.vue'
import SingleLine from '../questions/singleLine.vue'
import MultiFill from '../questions/multiFill.vue'
import MultiLine from '../questions/multiLine.vue'
import ImageFile from '../questions/imageFile.vue'
import ImageRadio from '../questions/imageRadio.vue'
import ImageCheckbox from '../questions/imageCheckbox.vue'
import Location from '../questions/locationFill.vue'
import Datetime from '../questions/datetimeFill.vue'
import DynamicTable from '../questions/dynamicTable.vue'
import DescriptionPanel from '../questions/descriptionPanel.vue'

const props = defineProps({
  examId: {
    type: String,
    required: true
  },
  accountId: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['submit'])

// 考试相关状态
const route = useRoute()
const pagerInfo = reactive({
  title: '',
  desc: '',
  questions: []
})
const userInfo = reactive({
  name: '',
  examineeId: ''
})
const userAnswers = reactive({})
const markedQuestions = ref([])
const showQuestionModal = ref(false)
const showNotice = ref(true)
const examDuration = 120 // 考试时长(分钟)
const timeLeft = ref(examDuration * 60) // 剩余时间(秒)
const pagerId = ref(null)

// 格式化时间显示
const formattedTime = computed(() => {
  const hours = Math.floor(timeLeft.value / 3600)
  const minutes = Math.floor((timeLeft.value % 3600) / 60)
  const seconds = timeLeft.value % 60
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
})

// 根据题目类型返回对应组件
const getQuestionComponent = (type) => {
  const componentMap = {
    'radio': RadioSelect,
    'checkbox': Checkbox,
    'single-line': SingleLine,
    'multi-fill': MultiFill,
    'multi-line': MultiLine,
    'image-file': ImageFile,
    'image-radio': ImageRadio,
    'image-checkbox': ImageCheckbox,
    'location': Location,
    'datetime': Datetime,
    'dynamic-table': DynamicTable,
    'description': DescriptionPanel
  }
  return componentMap[type] || null
}

// 获取题目类型名称
const getQuestionTypeName = (type) => {
  const typeNames = {
    'radio': '单选题',
    'checkbox': '多选题',
    'single-line': '填空题',
    'multi-fill': '多行填空题',
    'multi-line': '主观题',
    'image-file': '图片题',
    'image-radio': '图片单选题',
    'image-checkbox': '图片多选题',
    'location': '位置题',
    'datetime': '时间题',
    'dynamic-table': '表格题',
    'description': '描述题'
  }
  return typeNames[type] || '未知题型'
}

// 处理答案变化
const handleAnswerChange = (updatedQuestion) => {
  console.log('updatedQuestion = ' + JSON.stringify(updatedQuestion))
  if (updatedQuestion.type === 'checkbox' || updatedQuestion.type === 'image-checkbox') {
    userAnswers[updatedQuestion.id] = updatedQuestion.answers
      .filter(a => a.selected)
      .map(a => a.label)
  } else if (updatedQuestion.type === 'radio' || updatedQuestion.type === 'image-radio') {
    const selected = updatedQuestion.answers.find(a => a.selected)
    userAnswers[updatedQuestion.id] = selected ? [selected.label] : []
  } else if (updatedQuestion.type === 'single-line') {
    userAnswers[updatedQuestion.id] = updatedQuestion.answer[0] || ''
  } else if (updatedQuestion.type === 'multi-fill') {
    console.log('multi-fill = ' + JSON.stringify(updatedQuestion))
    userAnswers[updatedQuestion.id] = updatedQuestion.answers || []
  } else if (updatedQuestion.type === 'description') {
    userAnswers[updatedQuestion.id] = updatedQuestion.answer || []
  } else if (updatedQuestion.type === 'multi-line') {
    userAnswers[updatedQuestion.id] = updatedQuestion.answer[0] || ''
  } else if (updatedQuestion.type === 'datetime') {
    userAnswers[updatedQuestion.id] = updatedQuestion.answer[0] || ''
  } else if (updatedQuestion.type === 'image-file') {
    userAnswers[updatedQuestion.id] = updatedQuestion.answer || []
  } else {
    userAnswers[updatedQuestion.id] = updatedQuestion
  }

  // 2. 更新 pagerInfo.questions（关键修复）
  const questionIndex = pagerInfo.questions.findIndex(q => q.id === updatedQuestion.id);
  if (questionIndex !== -1) {
    pagerInfo.questions[questionIndex] = { ...updatedQuestion }; // 替换整个对象，确保响应式更新
  }

}

// 标记/取消标记题目
const toggleMarkQuestion = (questionId) => {
  const index = markedQuestions.value.indexOf(questionId)
  if (index === -1) {
    markedQuestions.value.push(questionId)
  } else {
    markedQuestions.value.splice(index, 1)
  }
}

// 检查题目是否有答案
const hasAnswer = (questionId) => {
  return userAnswers[questionId] && ((Array.isArray(userAnswers[questionId]) && userAnswers[questionId].length > 0) || (!Array.isArray(userAnswers[questionId]) && userAnswers[questionId] !== ''))
}

// // 跳转到指定题目
// const scrollToQuestion = (target) => {
//   let element = null
  
//   if (typeof target === 'number') {
//     element = document.getElementById(`question-${target}`)
//   } else if (typeof target === 'string') {
//     const index = pagerInfo.questions.findIndex(q => q.id === target) + 1
//     if (index > 0) {
//       element = document.getElementById(`question-${index}`)
//     }
//   }
  
//   if (element) {
//     element.scrollIntoView({ behavior: 'smooth', block: 'start' })
//     element.classList.add('unanswered-highlight')
//     setTimeout(() => {
//       element.classList.remove('unanswered-highlight')
//     }, 2000)
//   }
// }

// 检查未答题目的函数
const checkUnansweredQuestions = () => {
  const unansweredQuestions = []

  console.log('userAnswers = ' + JSON.stringify(userAnswers));

  pagerInfo.questions.forEach(question => {
    let hasAnswer = false
    
    if (question.type === 'single-line' || question.type === 'multi-line' || question.type === 'datetime' || question.type === 'description') {
      console.log('userAnswers[question.id]=' + userAnswers[question.id])
      hasAnswer = userAnswers[question.id] && userAnswers[question.id].trim() !== ''
    } else if (question.type === 'multi-fill') {
      // 优先从userAnswers获取，其次从question.userAnswers，最后从question.answers
      const answers = userAnswers[question.id] || question.userAnswers || question.answers || []
      console.log('Checking multi-fill answers:', JSON.stringify({
        id: question.id,
        userAnswers: userAnswers[question.id],
        questionUserAnswers: question.userAnswers,
        questionAnswers: question.answers,
        finalAnswers: answers
      }))
      
      // 只要有一个非空答案就算已回答
      hasAnswer = Array.isArray(answers) && 
                 answers.some(answer => answer && answer.trim() !== '')

    } else if (question.type === 'image-file') {
      hasAnswer = userAnswers[question.id] && 
                  Array.isArray(userAnswers[question.id]) && 
                  userAnswers[question.id].length > 0
    } else if (Array.isArray(userAnswers[question.id])) {
      hasAnswer = userAnswers[question.id].length > 0
    } else {
      hasAnswer = userAnswers[question.id] !== undefined && 
                  userAnswers[question.id] !== null && 
                  userAnswers[question.id] !== ''
    }
    
    if (!hasAnswer) {
      unansweredQuestions.push({
        id: question.id,
        index: pagerInfo.questions.findIndex(q => q.id === question.id) + 1,
        type: getQuestionTypeName(question.type),
        title: question.title || `第${pagerInfo.questions.findIndex(q => q.id === question.id) + 1}题`
      })
    }
  })

  return unansweredQuestions
}

const submitExam = async (autoSubmit = false) => {
  const unansweredQuestions = checkUnansweredQuestions()
  
  if (!autoSubmit && unansweredQuestions.length > 0) {
    try {
      await ElMessageBox({
        title: '未完成题目提醒',
        message: `
          <div>
            <p>您还有 <strong>${unansweredQuestions.length}</strong> 道题目未作答：</p>
            <ul style="max-height: 200px; overflow-y: auto; margin: 10px 0; padding-left: 20px;">
              ${unansweredQuestions.map(q => 
                `<li style="margin-bottom: 5px; cursor: pointer;" 
                    onclick="document.getElementById('question-${q.index}').scrollIntoView({behavior: 'smooth'})">
                  ${q.index}. ${q.type} - ${q.title.substring(0, 20)}${q.title.length > 20 ? '...' : ''}
                </li>`
              ).join('')}
            </ul>
            <p>确定要提交吗？</p>
          </div>
        `,
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确认提交',
        cancelButtonText: '返回检查',
        type: 'warning'
      })

      await doSubmit(autoSubmit)
    } catch (error) {
      toggleMarkQuestion(unansweredQuestions.map(q => q.id))
      return
    }
  } else {
    await doSubmit(autoSubmit)
  }
}

const doSubmit = async (autoSubmit) => {
  try {
    await ElMessageBox.confirm(
      autoSubmit ? '考试时间已结束，系统将自动提交试卷！' : '确认提交试卷吗？提交后无法修改！',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: autoSubmit ? '' : '取消',
        showCancelButton: !autoSubmit,
        type: 'warning'
      }
    )

    emit('submit', userAnswers, autoSubmit , pagerInfo)
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('提交失败: ' + error.message)
    }
  }
}

// 开始考试计时器
const startExamTimer = () => {
  const timer = setInterval(() => {
    timeLeft.value--
    
    if (timeLeft.value === 15 * 60) {
      ElMessage.warning('距离考试结束还有15分钟，请抓紧时间答题！')
    }
    
    if (timeLeft.value === 5 * 60) {
      ElMessage.warning('距离考试结束还有5分钟，请尽快完成答题！')
    }
    
    if (timeLeft.value <= 0) {
      clearInterval(timer)
      submitExam(true)
    }
  }, 1000)
}

// 初始化考试数据
const initExamData = async () => {
  const res = await detail(props.examId)
  pagerInfo.title = res.data.examName
  pagerInfo.desc = '期末考试试卷'
  pagerId.value = res.data.pagerId
  
  // 从本地存储恢复用户信息
  const savedUserInfo = localStorage.getItem(`exam_user_${props.accountId}`)

  console.log('props.accountId = ' + props.accountId);
  console.log('savedUserInfo = ' + savedUserInfo);

  if (savedUserInfo) {
    Object.assign(userInfo, JSON.parse(savedUserInfo))
  }
  
  await handlePagerDetail()
  startExamTimer()
  
  // 从本地存储恢复答案
  const savedAnswers = localStorage.getItem(`exam_answers_${props.accountId}`)
  if (savedAnswers) {
    Object.assign(userAnswers, JSON.parse(savedAnswers))
    ElMessage.info('已恢复上次答题进度')
  }
}

// 获取试卷详情
const handlePagerDetail = async () => {
  const res = await getPagerDetail(pagerId.value)
  pagerInfo.id = res.data.id
  pagerInfo.title = res.data.pagerName
  pagerInfo.desc = res.data.pagerDesc
  pagerInfo.pagerType = res.data.pagerType
  pagerInfo.difficulty = res.data.difficulty
  pagerInfo.questions = res.data.questionList
}

// 定时自动保存
const autoSaveInterval = setInterval(() => {
  localStorage.setItem(`exam_answers_${props.accountId}`, JSON.stringify(userAnswers))
  localStorage.setItem(`exam_user_${props.accountId}`, JSON.stringify(userInfo))
}, 30000) // 每30秒自动保存一次

// 页面刷新/关闭处理
const handleBeforeUnload = (e) => {
  e.preventDefault()
  e.returnValue = '考试正在进行中，离开页面将自动提交试卷！'
  return e.returnValue
}

const handleUnload = async () => {
  try {
    await saveAccountScore({
      accountId: props.accountId,
      examId: props.examId,
      answers: userAnswers,
      isAutoSubmit: true,
      isAbnormal: true
    })
  } catch (error) {
    console.error('自动提交失败:', error)
  }
}

// onMounted(() => {
// })
// 
// onUnmounted(() => {
// })

// 新增移动端相关状态
const isMobile = ref(false)
const showQuestionDrawer = ref(false)
const currentQuestion = ref(null)

// 在onMounted中添加移动端检测
onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
  // 原有初始化逻辑保持不变
  initExamData()
  window.addEventListener('beforeunload', handleBeforeUnload)
  window.addEventListener('unload', handleUnload)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
  // 原有卸载逻辑保持不变
  window.removeEventListener('beforeunload', handleBeforeUnload)
  window.removeEventListener('unload', handleUnload)
  clearInterval(autoSaveInterval)
})

// 检测是否为移动端
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
}

// 切换题目列表抽屉
const toggleQuestionList = () => {
  showQuestionDrawer.value = !showQuestionDrawer.value
}

// 跳转到题目时更新当前题目
const scrollToQuestion = (questionId) => {
  const index = pagerInfo.questions.findIndex(q => q.id === questionId)
  if (index !== -1) {
    currentQuestion.value = questionId
    const element = document.getElementById(`question-${index + 1}`)
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' })
      showQuestionDrawer.value = false
    }
  }
}

</script>

<style lang="scss" scoped>
.online-exam-container {
  background-color: #fafafa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .exam-sidebar {
    background: #fff;
    border-right: 1px solid #f5f5f5;
    width:400px;
  }

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 1.5rem;

    .header-left {
      display: flex;
      align-items: center;
      gap: 1rem;

      .exam-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1D2129;
        white-space: nowrap;
      }
    }

    .header-center {
      .exam-controls {
        display: flex;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
      }
    }

  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    justify-content: space-between;

    .student-info {
      display: flex;
      flex-direction: column;
      color: #4E5969;
    }

    .timer-container {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background-color: #F2F3F5;
      padding: 0.5rem 0.8rem;
      border-radius: 0.5rem;

      .timer-text {
        font-weight: 500;

        &.time-warning {
          color: #FF7D00;
          font-weight: bold;
        }
        
        &.time-critical {
          color: #F53F3F;
          font-weight: bold;
          animation: blink 1s infinite;
        }
      }
    }
  }

  .exam-main {
    padding: 1.5rem;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -20px;
    width: 100%;

    .exam-notice {
      margin-bottom: 1.5rem;
      padding: 10px;
    }

    .questions-area {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;

      .question-wrapper {
        background-color: #fff;
        border-radius: 0.75rem;
        padding: 0.5rem;

        .question-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1rem;
        }

        .question-footer {
          display: flex;
          justify-content: space-between;
          margin: 1.5rem;
        }
      }
    }
  }
}

ul.notice-list {
  list-style: none;
  font-size: 14px;
  line-height: 1.5rem;
  padding: 0px;
}

.unanswered-highlight {
  animation: highlight 2s ease;
  border-left: 4px solid #F53F3F;
  padding-left: 8px;
}

@keyframes highlight {
  0% { background-color: rgba(245, 63, 63, 0.1); }
  100% { background-color: transparent; }
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

// 添加移动端样式
@media (max-width: 768px) { 
  .exam-sidebar {
    display: none;
  }

  .exam-main{
    padding: 0px !important ;
  }
}

/* 移动端头部样式 */
  .mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: #fff;
    // box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 0 15px;
    
    .mobile-header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      max-width: 100%;
      margin: 0 auto;
      
      .exam-title {
        font-size: 16px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60%;
      }
      
      .mobile-timer {
        display: flex;
        align-items: center;
        gap: 5px;
        font-weight: 500;
        padding: 5px 10px;
        border-radius: 15px;
        background: #f5f5f5;
        
        &.time-warning {
          color: #FF7D00;
          background: #fff7e6;
        }
        
        &.time-critical {
          color: #F53F3F;
          background: #fff1f0;
          animation: blink 1s infinite;
        }
      }
    }
  }

  /* 移动端底部样式 */
  .mobile-footer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #fff;
    // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 0 15px;
    
    .footer-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      max-width: 100%;
      margin: 0 auto;
      gap: 10px;
      
      .footer-button {
        flex: 1;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
      }
    }
  }

  /* 题目导航抽屉样式 */
  .question-drawer {
    .question-nav {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      padding: 15px;
      
      .question-nav-item {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
        border-radius: 5px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s;
        
        &:hover {
          background: #e1e1e1;
        }
        
        &.answered {
          background: #e6f7ff;
          color: #1890ff;
        }
        
        &.marked {
          background: #fff7e6;
          color: #fa8c16;
        }
        
        &.current {
          border: 2px solid #1890ff;
        }
        
        .mark-icon {
          position: absolute;
          top: 2px;
          right: 2px;
          font-size: 10px;
          color: #fa8c16;
        }
      }
    }
  }

  /* 移动端适配 */
  @media (max-width: 768px) {
    .exam-sidebar {
      display: none;
    }
    
    .mobile-header,
    .mobile-footer {
      display: block;
    }
    
    .el-main {
      padding-top: 60px !important;
      padding-bottom: 70px !important;
    }
    
    // .exam-main {
    //   padding: 15px !important;
    //   margin-top: 0 !important;
    // }
    
    .questions-area {
      gap: 1rem !important;
      
      .question-wrapper {
        padding: 15px !important;
      }
    }
  }

</style>